<template>
    <div class="divBox trainerAnalyze">

        <el-container>
            <el-aside>
                <el-row class="asideBox">
                    <el-col :span="24" class="userAccount">{{ info.userName }}</el-col>
                    <el-col :span="24" class="asideLabel">
                        <el-button class="followingBtn" type="primary" @click="followBtn">跟随</el-button>
                    </el-col>


                    <el-col :span="24" class="asideLabel"><span>初始入金:</span><span>{{ info.initDeposit }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>利润率:</span><span>{{ info.winRate }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>累积净利润:</span><span>{{ info.totalRevenue
                            }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>账户净值:</span><span>{{ info.netWorth }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>当前跟随：</span><span>无跟单</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>最大回撤：</span><span>{{ info.returnRate }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>交易天数：</span><span>{{ info.uniqueTradeDays
                            }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>最近交易：</span><span>{{ info.recentlyTradeTime
                            }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>每天交易：</span><span>{{ info.tradeDayNum }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>最大持仓手数：</span><span>{{ info.maxPositionVolume
                            }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>最大持仓占比：</span><span>{{ info.maxPositionRate
                            }}</span></el-col>
                    <el-col :span="24" class="asideLabel"><span>平均持有时间：</span><span>{{ info.avgPositionTime
                            }}</span></el-col>
                    <el-col :span="24" class="oneLine"></el-col>
                    <el-col :span="24" class="alarm">投资有风险，入市需谨慎</el-col>
                </el-row>
            </el-aside>
            <el-main class="main">
                <el-tabs v-model="activeName" style="width: 100%" @tab-click="handleClick" class="tabs">
                    <el-tab-pane label="交易" name="first"><trade-tab v-if="activeName == 'first'" /></el-tab-pane>
                    <el-tab-pane label="图表" name="second">
                        <graphics :traderAccountId="traderAccountId" :uid="uid" v-if="activeName == 'second'" />
                    </el-tab-pane>
                    <el-tab-pane label="历史" name="third">
                        <history />
                    </el-tab-pane>
                    <el-tab-pane label="持仓" name="fourth">
                        <position />
                    </el-tab-pane>
                    <el-tab-pane label="跟随者" name="fifth">
                        <follow ref="reflash" />
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>


        <!-- 跟随弹窗 -->
        <el-dialog title="跟随" :visible.sync="dialogVisible" width="35%" top="10vh">
            <div class="dialog_box">
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>账号类型</span></div>
                    <div>
                        <el-select v-model="followObj.traderAccountType" placeholder="请选择" class="m_right_15"
                            @change="selectAccount">
                            <el-option v-for="item in accountTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                                :value="item.dictValue">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>跟单账号</span></div>
                    <div>
                        <UserSearchable ref="user2" v-model="followObj.traderAccountId" :type="'getMasterAccountType'"
                            :params="{ traderAccountType: followObj.traderAccountType, followType: 2, status: 1 }">
                            <template #dropdownTitle>
                                <span>id</span>
                                <span>昵称</span>
                                <span>权限</span>
                            </template>
                            <template v-slot:dropdown="{ item }">
                                <span v-show="followObj.traderAccountType == 2" class="span_wh">
                                    <span>{{ item.id }}</span>
                                    <span>{{ item.nickName }}</span>
                                    <span>{{ item.dataFactoryName }}</span>
                                </span>
                                <span v-show="followObj.traderAccountType == 1" class="span_wh">
                                    <span>{{ item.id }}</span>
                                    <span>{{ item.account }}</span>
                                    <span>{{ item.adminName }}</span>
                                </span>
                            </template>
                        </UserSearchable>
                    </div>
                </div>
                <!-- <div class="flex_center">
                    <div class="box_left"><span>*</span><span>交易员信号</span></div>
                    <div>
                        <el-input v-model="followObj.traderSignalName" placeholder="交易员信号" disabled></el-input>
                    </div>
                </div> -->
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>跟单倍数</span></div>
                    <div><el-input v-model="followObj.multiple" placeholder="跟单倍数"></el-input></div>
                </div>

                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>跟单方向</span></div>
                    <div>
                        <el-select v-model="followObj.strategy" placeholder="请选择" class="m_right_15">
                            <el-option v-for="item in strategyOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>限制多空</span></div>
                    <div>
                        <el-select v-model="followObj.restrict" placeholder="请选择" class="m_right_15">
                            <el-option v-for="item in restrictOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>状态</span></div>
                    <div>
                        <el-radio-group v-model="followObj.status">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="2">关闭</el-radio>
                        </el-radio-group>
                    </div>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 认</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import * as trainerAnalyze from '@/api/trainerAnalyze'

import TradeTab from '../components/tabs/trade/index.vue';
import Graphics from '../components/tabs/graphics/index.vue';
import History from '../components/tabs/history/index.vue';
import position from '../components/tabs/position/index.vue'
import follow from '../components/tabs/follow/index.vue'

import UserSearchable from "@/components/UserSearchable";

import { getDictData } from "@/api/transaction"

export default {
    components: {
        TradeTab,
        Graphics,
        History,
        position,
        follow,
        UserSearchable
    },

    data() {
        return {
            // uid: null, //uid
            // traderAccountId: null, //交易员id
            activeName: 'first', //当前页签
            info: {},

            dialogVisible: false,

            followObj: {
                "createBy": "",
                "createTime": "",
                "delBy": "",
                "delFlag": "",
                "delTime": "",
                "followType": 2,
                "id": "",
                "multiple": "",
                "remark": "",
                "restrict": "",
                "status": "",
                "strategy": "",
                "strategyWay": 1,
                "traderAccountId": "",
                "signalTraderAccountId": "",
                "traderAccountType": '1',
                "traderFollowName": "",
                "traderSignalId": [],
                "updateBy": "",
                "updateTime": "",
                'traderSignalName': ""
            },

            accountTypeOptions: [
                // {
                //     value: 1,
                //     label: '实盘'
                // }, {
                //     value: 2,
                //     label: '模拟'
                // }
            ],
            strategyOptions: [
                {
                    value: 1,
                    label: '正'
                }, {
                    value: 2,
                    label: '反'
                }
            ],
            restrictOptions: [
                {
                    value: 0,
                    label: '不限'
                }, {
                    value: 1,
                    label: '多'
                },
                {
                    value: 2,
                    label: '空'
                },
            ],
        }
    },
    mounted() {
        // this.uid = this.$route.query.uid;
        // this.traderAccountId = this.$route.query.traderAccountId;
        this.getTrainerAnalysisDetail();

        getDictData('yj_follow_acount_type').then((res) => {
            console.log('字典数据：', res)
            this.accountTypeOptions = res
        }).catch((res) => {
            console.log(res)
        })
    },
    methods: {

        getTrainerAnalysisDetail() {

            // let data = {
            //     uid: this.uid,
            //     traderAccountId: this.traderAccountId
            // } 
            let data = {
                uid: this.$route.query.uid,
                traderAccountId: this.$route.query.traderAccountId
            }

            trainerAnalyze.getTraderAnalysisInfo(data).then((res) => {
                console.log('训练员分析详情：', res)
                this.info = res;
                localStorage.setItem('info', JSON.stringify(res))
            }).catch((err) => {
                console.log(err)
            })
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        followBtn() {
            let that = this;
            that.followObj = {
                "createBy": "",
                "createTime": "",
                "delBy": "",
                "delFlag": "",
                "delTime": "",
                "followType": 2,
                "id": "",
                "multiple": "",
                "remark": "",
                "restrict": "",
                "status": "",
                "strategy": "",
                "strategyWay": 1,
                "traderAccountId": "",
                "signalTraderAccountId": "",
                "traderAccountType": '2',
                "traderFollowName": "",
                "traderSignalId": [],
                "updateBy": "",
                "updateTime": "",
                'traderSignalName': ""
            }
            that.dialogVisible = true;
        },

        saveAdd() {
            console.log('确定保存！')

            let that = this;
            console.log(that.followObj)



            if (that.followObj.traderAccountType == "") {
                that.$message.warning('请选择账号类型！')
                return
            }
            if (that.followObj.traderAccountId == "") {
                that.$message.warning('请选择跟单账号！')
                return
            }
            if (that.followObj.multiple == "") {
                that.$message.warning('请输入跟单策略！')
                return
            }
            if (that.followObj.strategy == "") {
                that.$message.warning('请选择跟单方向！')
                return
            }
            if (that.followObj.restrict === "") {
                that.$message.warning('请选择限制！')
                return
            }
            if (that.followObj.status == "") {
                that.$message.warning('请选择状态！')
                return
            }
            console.log('校验数据', that.followObj)

            this.followObj.signalTraderAccountId = this.$route.query.traderAccountId;

            trainerAnalyze.saveFollower(that.followObj).then((res) => {
                that.$message.success('跟随成功！')
                that.dialogVisible = false;
                console.log(res)
                // this.getTrainerAnalysisDetail();
                // 重新刷新页面获取到跟随者的数据
                this.$refs.reflash.getdata()
            }).catch((res) => {
                console.log(res)
            })

        },

        selectAccount(e) {
            // console.log('当前选择:' + e)
            this.followObj.traderAccountType = e;
            this.followObj.traderAccountId = "";
            // console.log('当前选择表格下标1实盘，2模拟:' + this.followObj.traderAccountType)

            this.$nextTick(() => {
                this.$refs.user2.remoteMethod();
                this.$refs.user2.setLabelValue();
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.trainerAnalyze {
    .asideBox {
        height: 100%;
        padding: 10px 20px;
        background-color: #fff;

        .userAccount {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
        }

        .followingBtn {
            width: 100%
        }

        .asideLabel {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .oneLine {
            height: 1px;
            width: 100%;
            margin: 30px auto;
            background-color: gray;
            border: none;
        }

        .alarm {
            text-align: center;
            color: goldenrod;
            font-size: 16px;
        }

    }

    .main {
        box-sizing: border-box;
        min-height: 100%;
        padding-top: 0;
        padding-left: 20px;

        .tabs {
            box-sizing: border-box;
            min-height: 100%;
            background-color: #fff;
            padding-left: 20px;
        }

        ::v-deep .el-tabs__item {
            font-size: 16px !important;
            font-weight: bold !important;
        }

    }

}

.sectionPie {
    display: flex;
    justify-content: center;
}

.box-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.dis_flex {
    display: flex;
}

.m-right-15 {
    margin-right: 15px;

    text-align: center;
    font-weight: bold;
}



.dialog_box {
    padding: 10px;
}

.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    // width: 100%;
}

.flex_center>div {
    width: 30%;
}

.flex_center div:last-child {
    width: 85%;
}

.color_green {
    color: #13ce66;
}

.color_red {
    color: #ff4949;
}

.box_left span:first-child {
    color: red;
    margin-right: 3px;
}

.delete_title {
    text-align: center;
    font-size: 18px;
}

.color_red_delete {
    color: red;
    margin: 0 10px;
    font-weight: bold;
}

.box_left span:last-child {
    font-weight: bold;
}

.flex_left {
    display: flex;
    justify-content: flex-start;
}

.input-wh {
    width: 200px;
    text-align: center;
    margin-right: 15px;
}

.flex_center_left {
    align-items: center;
}

.span_wh {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
</style>